<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <style>
        body {
            padding: 0;
            margin: 0;
            font-family: "Open Sans", sans-serif;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .skills {
            width: 100%;
            min-width: 600px;
            padding: 0 20px;
        }

        .skill-name {
            font-size: 1.2em;
            font-weight: 700;
            text-decoration: uppercase;
            margin: 20px 0;
        }

        .skill-bar {
            height: 20px;
            background: #cacaca;
            border-radius: 8px;
        }

        .skill-per {
            height: 20px;
            background-color: #0fbcf9;
            border-radius: 8px;
            width: 0;
            /* 位置在这里改变 */
            transition-duration: 2s;
            transition-property: width;
            position: relative;
        }

        .skill-per::before {
            content: attr(per);
            position: absolute;
            padding: 4px 6px;
            background: #000;
            color: #fff;
            font-size: 0.8em;
            border-radius: 4px;
            top: -35px;
            right: 0;
            transform: translateX(50%);
        }

        .skill-per::after {
            content: '';
            position: absolute;
            width: 12px;
            height: 10px;
            background-color: #000;
            top: -16px;
            right: 0;
            transform: translateX(50%) rotate(45deg);
            border-radius: 2px;
        }
    </style>
    <script src="../jquery/jquery-3.0.0.min.js"></script>

</head>

<body>

    <div class="skills">
        <div class="skil">
            <p class="skill-name">
                HTML
            </p>
            <div class="skill-bar">
                <div class="skill-per" per="40">
                </div>
            </div>
        </div>
        <div class="skil">
            <p class="skill-name">
                CSS
            </p>
            <div class="skill-bar">
                <div class="skill-per" per="70">
                </div>
            </div>
        </div>
        <div class="skil">
            <p class="skill-name">
                JavaScript
            </p>
            <div class="skill-bar">
                <div class="skill-per" per="60">
                </div>
            </div>
        </div>
    </div>

    <script>
        $('.skill-per').each(function () {
            console.log($(this).width());
            console.log($(this));
            var $this = $(this);
            var per = $this.attr('per');
            $this.css("width", per + '%');
            $({
                animatedValue: 0
            }).animate({
                animatedValue: per
            }, {
                duration: 1000,
                step: function () {
                    $this.attr('per', Math.floor(this.animatedValue))
                },
                complete: function () {
                    $this.attr('per', Math.floor(this.animatedValue) + '%')
                }
            })
        });
    </script>
</body>

</html>